<template>
	<view class="page"> <u-navbar title="邀请" border @leftClick="$utils.back()" placeholder>
		</u-navbar>
		<view style="margin-top: 30vh;">
			<u-avatar :src='detail.customer.avatar' size='100rpx' />
		</view>
		
		<view style="margin: 20rpx 0 100rpx ;" v-if="!loading">
			{{detail.customer.nick_name}}邀请你一起装修他的新家一
		</view>
		<view style="margin: 20rpx 0 100rpx ;height: 30rpx;" class="Skeleton" v-else>
		</view>
		<view style="width: 40vw;margin-bottom: 26vh;">
			<u-button :disabled="disabled" color="linear-gradient(to bottom,  #489aff,#3573be)"
				open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
				接受邀请
			</u-button>
		</view>
		<view>
			已有{{detail.relatives.length}}个亲友
		</view>
		<view>
			<u-avatar-group :urls="detail.relatives" keyName='avatar' size="35" gap="0.4"></u-avatar-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: false,
				detail: {
					relatives: []
				},
				loading: true,
				loginCode: null,
				Phone: null,
				openid: null,
				unionid: null
			}
		},
		onLoad(op) {
			uni.showLoading({
				title: '加载中...'
			})
			this.$api.User.Relative(op.id).then(res => {
				uni.hideLoading()
				this.detail = {
					customer:res.data.user,
					relatives:res.data.relatives.map( item=>item.relative?.avatar)
				}
				this.loading = false
			}).catch(err => {
				uni.hideLoading()
				uni.$u.toast(err.message)
			})
		},
		methods: {
			onGetPhoneNumber(e) {
				if (!e.detail.code) return
				this.disabled = true
				uni.showLoading({
					title: '登录中...',
				})
				uni.login({
					provider: 'weixin', //使用微信登录
					success: (loginRes) => {
						this.loginCode = loginRes.code
						this.Phone = e.detail
						this.getOpenidAndSession()
					},
					fail: () => {
						this.disabled = false
						uni.hideLoading()
					}
				});
			},
			getOpenidAndSession() {
				this.$api.Login.Session({
					code: this.loginCode
				}).then(res => {
					this.openid = res.data.openid
					this.unionid = res.data.unionid
					this.login()
				}).catch(err => {
					this.disabled = false
					uni.hideLoading()
				})
			},
			login() {
				wx.getUserInfo({
					success: resUser => {
						this.$api.Login.Mobile({
							openid: this.openid,
							unionid: this.unionid,
							code: this.Phone.code,
							iv: this.Phone.iv,
							encryptedData: this.Phone.encryptedData,
							rawData: resUser.rawData,
							signature: resUser.signature,
							userInfo: {
								...resUser.userInfo
							},
						}).then(res => {
							uni.setStorageSync('openid', this.openid);
							uni.setStorageSync('token', res.data.token);
							uni.setStorageSync('user', res.data.user);
							this.relativeAdd(res.data.user)
						}).catch(err => {
							this.disabled = false
							uni.hideLoading()
						})
					}
				})
			},
			relativeAdd(user) {
				let obj = {
					relative_id: user.id,
				}
				this.$api.Relative.Add(obj).then(res => {
					uni.reLaunch({
						url: '/home_c/index' 
					})
					uni.hideLoading()
				}).catch(err => {
					this.disabled = false
					uni.hideLoading()
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		background: linear-gradient(to right bottom, rgba(#0ad2ff, 0.3), rgba(#428aef, 0.2));
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
</style>